<template>
    <!-- workbenches -->
    <div class="workbenches-container">
        <!-- todo  nameRender -->
        <h1>早上好! Daisy</h1>
        <!-- statistics统计卡片 -->
        <div class="statistics-container">
            <template v-for="item in homeCount" :key="item._id">
                <el-card class="statistics-card">
                    <div class="statistics-flex">
                        <div class="statistics-circle" :style="{ backgroundColor: item.color }">
                            <el-image :src="item.icon"></el-image>
                        </div>
                        <div>
                            <span>{{ item.title }}</span>
                            <p>{{ item.count }}</p>
                        </div>
                    </div>
                </el-card>
            </template>
        </div>

        <!-- 数据概况、待办提醒 -->
        <div class="todo-data-container">
            <!-- 数据概况图表 -->
            <el-card class="data-echarts-card">
                <p class="card-title-text">数据概况</p>
                <VueEcharts style="height: 340px;" :option="option"></VueEcharts>
            </el-card>
            <!-- 待办提醒卡片 -->
            <el-card class="todo-reminder-card">
                <p style="margin-bottom: 15px;">待办提醒</p>

                <div class="todos-content flex-ac" v-for="item in todosData" :key="item.title"
                    @click="todosPush(item.title)">
                    <template v-if="item.count>0">
                        <el-badge is-dot :offset="[105, 24]">
                            <div class="todos-text">
                                <p>{{ item.count }}</p>
                                <p>{{ item.title }}</p>
                            </div>
                        </el-badge>
                    </template>
                    <template v-else-if="item.count==0">
                        <el-badge is-dot :offset="[105, 24]" color="#2ECC71">
                            <div class="todos-text">
                                <p>{{ item.count }}</p>
                                <p>{{ item.title }}</p>
                            </div>
                        </el-badge>
                    </template>
                </div>
            </el-card>
        </div>

        <!-- 居民标签、居民指标异常 -->
        <div class="resident-container">
            <el-card class="resident-sign-card">
                <p class="card-title-text">居民标签</p>
                <div class="sign-list" v-for="item in signList" :key="item">
                    <div>
                        <span>{{ item.name }}</span>
                        <span>{{ item.count }}</span>
                    </div>
                    <el-progress :show-text="false" :percentage="item.progress"></el-progress>
                </div>
            </el-card>

            <el-card class="resident-abnormal-card">
                <div class="resident-abnormal-container">
                    <span class="res-title card-title-text">居民指标异常</span>
                    <div class="flex-ct">
                        <span style="font-size: 12px;">全部</span>
                        <div class="rightarrow"></div>
                    </div>
                </div>

                <div style="display: grid;grid-template-columns: 1fr 1fr 1fr; place-items: center;">
                    <!-- 居民个人卡片 -->
                    <div class="resident-item-content" v-for="item in 3" :key="item" @click="residentInfoPush">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            :size="74" />
                        <div class="resident-item-name">
                            <span>王然</span>
                            <span>26岁</span>
                            <img src="../../assets/sexy.png"></img>
                        </div>
                        <div class="resident-item-warning">
                            <img src="../../assets/warning.png" alt="">
                            <span>血糖过高</span>
                        </div>
                        <el-button type="primary">查看详情</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 本周签约概况 -->
        <el-card class="overview-card">
            <p class="card-title-text">本周签约概况</p>


            <!-- 基础表格table -->
            <el-table :data="tableData" stripe style="width: 100%;"
                :header-cell-style="{ background: '#f2f2f2', fontWeight: 'normal', color: '#515a6e', height: '46px', textAlign: 'center' }"
                :cell-style="{ height: '46px', textAlign: 'center' }">
                <el-table-column prop="team" label="团队" width="180" />
                <el-table-column prop="time1" label="2021-01-04" />
                <el-table-column prop="time2" label="2021-01-05" />
                <el-table-column prop="time3" label="2021-01-06" />
                <el-table-column prop="time4" label="2021-01-07" />
                <el-table-column prop="time5" label="2021-01-08" />
                <el-table-column prop="time6" label="2021-01-09" />
                <el-table-column prop="time7" label="2021-01-10" />
            </el-table>
        </el-card>

    </div>
</template>

<script setup>

import { computed, onMounted, ref } from 'vue';
import { findHomeChartsDataApi, findHomeCountApi, findHomeTodosApi } from '../../api/workbenches';
import { useRouter } from 'vue-router';

const homeCount = ref()
const echartsData = ref()
const todosData = ref()

const signList = [{ name: '高血压', count: '200', progress: 20 },
{ name: '关心病', count: '120', progress: 70 },
{ name: '高血糖', count: '40', progress: 55 },
{ name: '高血脂', count: '30', progress: 25 },
{ name: '慢病护理', count: '110', progress: 15 },
{ name: '多动症', count: '88', progress: 10 },
]

// 表格数据
const tableData = [
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    }, {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    },
    {
        team: '李明明团队',
        time1: '50',
        time2: '100',
        time3: '150',
        time4: '146',
        time5: '134',
        time6: '120',
        time7: '109',
    }
]

const router = useRouter();
onMounted(() => {
    findHomeCount();
    getEchartsData();
    getTodosData();
})

// todos跳转页面
function todosPush(data) {
    // todo
    console.log(data);
}
// 居民跳转
function residentInfoPush() {
    router.push('/resident/detail/:_id')
}


async function findHomeCount() {
    const res = await findHomeCountApi();
    if (res.code == 200) {
        homeCount.value = res.data
    }
}

// 图表数据
const option = computed(() => {
    return {
        tooltip: {
            trigger: 'axis'
        },
        //   名称
        legend: {
            data: ['居民数量', '签约量', '服务量'],
            left: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            // 下载图表图片
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: echartsData.value?.date
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '居民数量',
                type: 'line',
                showSymbol: false,
                data: echartsData.value?.residents
            },
            {
                name: '签约量',
                type: 'line',
                showSymbol: false,
                data: echartsData.value?.services
            },
            {
                name: '服务量',
                type: 'line',
                showSymbol: false,
                data: echartsData.value?.signs
            }
        ]
    }
});

// 获取图表数据
const getEchartsData = () => {
    findHomeChartsDataApi()
        .then(res => {
            if (res.code == 200) {
                echartsData.value = res.data;
            }
        })
}

// 待办提醒
const getTodosData = () => {
    findHomeTodosApi().then(res => {
        if (res.code == 200) {
            todosData.value = res.data;
        }
    })
}

</script>


<style scoped lang="scss">
h1{
    margin-bottom: 20px;
}
.card-title-text {
    margin-bottom: 20px;
    font-weight: 500;
}

.workbenches-container {
    width: 1130px;
    margin: 0 auto;
}

.el-card {
    border-radius: 8px;
    padding: 0;
}

.statistics-container {
    display: flex;
    justify-content: space-between;
}

.statistics-card {
    width: 263px;
    height: 119px;
}

.statistics-flex {
    display: flex;
    align-items: center;

    div:nth-child(2) {
        text-align: left;
    }

    span {
        font-weight: 400;
        font-size: 13px;
        color: #999999;
        line-height: 32px;
    }

    p {
        font-weight: 650;
        font-style: normal;
        font-size: 30px;
        color: #2984F8;
        line-height: 32px;
        margin: 10px 0 0;
    }
}

// homeCount-circle
.statistics-circle {
    position: relative;
    margin: 0 20px 0 10px;
    border-radius: 50%;
    width: 53px;
    height: 53px;

    .el-image {
        width: 16px;
        height: 16px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 反向移动自身宽高的50% */
    }
}


.todo-data-container {
    display: flex;
    margin: 30px auto;

    .data-echarts-card {
        width: 846px;
        height: 449px;
        margin-right: 30px;
    }

    .todo-reminder-card {
        width: 263px;
        height: 449px;
        color: #333;
    }
}

.todos-content {
    height: 75px;
    border-top: 1px solid #f2f2f2;
}

.todos-text {
    width: 110px;

    p:first-child {
        font-size: 20px;
        font-weight: 500;
    }

    p:last-child {
        font-size: 13px;
        color: #999;
    }
}

// ------------------------居民
.resident-container {
    display: flex;

    .resident-sign-card {
        width: 338px;
        height: 382px;
        margin-right: 30px;
    }

    .resident-abnormal-card {
        width: 779px;
        height: 382px;
    }
}

// 居民标签
.sign-list {
    height: 50px;

    div:first-child {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #999;
    }
}

.resident-abnormal-container {
    display: flex;
    justify-content: space-between;
    color: #999;

    .res-title {
        color: #333;
    }
}

.rightarrow {
    margin-left: 2px;
    width: 10px;
    height: 12px;
    background-image: url(../../assets/rightarrow.png);
    background-size: cover;
}

.rightarrow:hover {
    background-image: url(../../assets/rightarrowh.png);
}

.resident-item-content {
    padding: 40px 0;
    width: 228px;
    height: 198px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .resident-item-name>span:first-child {
        font-size: 18px;
        color: #333;
        font-weight: 500;
        margin-right: 5px;
    }

    .resident-item-name>span:nth-child(2) {
        font-size: 12px;
        color: #999;
        margin-right: 5px;
    }

    .resident-item-warning>img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .resident-item-warning {
        color: #FA746B;
        font-size: 13px;
    }

    .el-button {
        width: 120px;
        height: 34px;
        font-weight: 400;
        font-size: 13px;
    }
}

.resident-item-content:hover {
    background-color: #f4f5f8;
}


.overview-card {
    margin-top: 30px;
    width: 1130px;
}
</style>
